<template>
  <div class="title">
    首页列表
    <br />
    <button @click="handleBack">返回上一页</button>
  </div>
  <div class="content">
    <div class="list">
      <RouterLink to="/home/h1">首页1</RouterLink><br />
      <RouterLink to="/home/h2">首页2</RouterLink><br />
      <RouterLink to="/home/h3">首页3</RouterLink>
    </div>
    <div class="text">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const handleBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.title {
  color: rgb(119, 129, 29);
  font-weight: 800;
  font-size: 18px;
}
.content {
  color: rgb(90, 96, 34);
  display: flex;
  width: 100vw;
  height: 100vh;
  .list {
    height: 100vh;
    width: 200px;
    text-align: center;
    background-color: antiquewhite;
  }
  .text {
    flex: 1;
    background-color: rgba(222, 237, 167, 0.539);
  }
}
</style>
